<template>
	<view class="wrap">
		<view class="group_box">
			<view v-if="list.length">
				<view class="item" v-for="(item,index) in list">
					<view class="title">
						<view class="name">
							{{item.name}}
						</view>
					</view>
					<view class="t_btn">
						<text class="iconfont icon-shanchu" @click="handleDel(item.id, item.name)"></text>
						<text class="iconfont icon-tianxie" @click="handleBtn(item)"></text>
					</view>
				</view>
			</view>

			<view class="u-empty" v-else>
				<u-empty text="暂无数据" icon="https://tianliyx.oss-cn-shanghai.aliyuncs.com/images/20250311/0057423001741660320.png"></u-empty>
			</view>
		</view>
		<view class="add_btn">
			<button class="button btn-normal" @click="handleBtn">添加地址分组</button>
		</view>



		<u-modal :show="show" @confirm="confirm" ref="uModal" @cancel="cancel" :asyncClose="true" showCancelButton>
			<view class="group">
				<input type="text" class="group_name" placeholder="请输入分组名称" v-model="group_name">
			</view>
		</u-modal>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		COMMON
	} from "../../utils/commom.js"
	import {
		group_list,
		del_group,
		add_group,
		edit_group
	} from "../../api/address.js"

	const list = ref([]);
	const show = ref(false);
	const group_name = ref(null);
	const id = ref(null);

	onShow(() => {
		get_list();
	});

	// 获取列表
	function get_list() {
		group_list().then(res => {
			let data = res.data.list;
			list.value = data;
		})
	}

	// 删除
	function handleDel(id, name) {
		uni.showModal({
			content: `您确定要删除分组【${ name }】吗?`,
			success: function(res) {
				if (res.confirm) {
					del_group(id).then(res => {
						uni.showToast({
							title: res.msg,
							icon: "none",
							success() {
								setTimeout(function() {
									get_list();
								}, 1000);
							}
						});
					})
				}
			}
		});
	}


	// 添加/编辑分组弹框
	function handleBtn(item) {
		show.value = true;
		if (item) {
			group_name.value = item.name;
			id.value = item.id;
		}
	}


	// 添加/编辑分组
	function confirm() {

		if (id.value) {
			edit_group({
				name: group_name.value,
				id: id.value
			}).then(res => {
				show.value = false;
				uni.showToast({
					title: res.msg,
					icon: "none",
					success() {
						setTimeout(function() {
							get_list();
						}, 1000);
					}
				});
			})
		} else {
			add_group({
				name: group_name.value,
				id: id.value
			}).then(res => {
				show.value = false;
				uni.showToast({
					title: res.msg,
					icon: "none",
					success() {
						setTimeout(function() {
							get_list();
						}, 1000);
					}
				});
			})
		}
	}

	function cancel() {
		show.value = false;
		group_name.value = null;
	}
</script>

<style lang="scss" scoped>
	.group_box {
		width: 100%;
		height: 85vh;
		overflow: auto;
		padding: 30rpx;

		.item {
			width: 100%;
			overflow: hidden;
			background-color: #fff;
			border-radius: 10px;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;

			.title {
				overflow: hidden;
				width: 60%;
				float: left;

				.name {
					font-size: 28rpx;
					font-weight: 600;
					padding-bottom: 10rpx;
					color: #333;
				}

				text {
					font-size: 26rpx;
					color: #666;
				}
			}

			.t_btn {
				width: 35%;
				overflow: hidden;
				float: right;

				.d_text {
					font-size: 24rpx;
					float: left;
					padding-left: 10rpx;
					padding-top: 3rpx;
					color: #666;
				}

				.iconfont {
					float: right;
					color: #666;
					margin-left: 50rpx;
				}
			}
		}
	}

	.add_btn {
		padding: 30rpx;

		.button {
			background: linear-gradient(to right, #f9211c, #ff6335);
		}
	}

	.group_name {
		border: 1px solid #ccc;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10px;
		padding: 0 10rpx;
	}
</style>